<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery.validate.js"></script> 
<script type="text/javascript">
$(document).ready(function() { 
    $("#form1").validate({ 
        rules: {              
            username: { required: true, minlength: 5}, 
			password: { required: true, minlength: 5},
			name: { required: true, minlength: 5},
			address: { required: true, minlength: 5},
			city: { required: true, minlength: 5},
			age: { required: true, number: true, minlength: 2},
			email: { required: true, email: true},
			gender: { required: true},
			phone: { required: true, minlength: 5},
			secret_key: { required: true, minlength: 5},
			fupload: { required: true, minlength: 5},
			authority: { required: true}
        }, 
        messages: {            
            Comment: "Please enter a comments",
        } 
    }); 
}); 
</script> 

<style type="text/css"> 
input.error
{
	font: normal 10px;
	font-family: Segoe UI, Corbel, Arial, Helvetica, sans-serif;
	background-color: #ffc;
	border: 1px solid #c00;
}

textarea.error
{
	font: normal 10px;
	font-family: Segoe UI, Corbel, Arial, Helvetica, sans-serif;
	background-color: #ffc;
	border: 1px solid #c00;
}

select.error
{
	font: normal 10px;
	font-family: Segoe UI, Corbel, Arial, Helvetica, sans-serif;
	background-color: #ffc;
	border: 1px solid #c00;
}

#messageErrorCity label.error {
	display: none;
}
#messageErrorHobby label.error {
	display: none;
}

#messageErrorGender label.error {
	display: none;
}

#messageErrorFruit label.error {
	display: none;
}
</style> 

<form id="form1" method="POST" enctype="multipart/form-data">
<H3><center>Form Registrasi :</center></h3>	
<table class="table table-striped" width="100%" border="0">
	<tr><td colspan="3">&nbsp </td></tr>
	<tr><td>Username </td><td> : </td><td><input class="span3" type="text" name="username"></td></tr>
	<tr><td>Password </td><td> : </td><td><input class="span3" type="password" name="password"></td></tr>
	<tr><td>Name </td><td> : </td><td><input class="span4" type="text" name="name"></td></tr>
	<tr><td>Address </td><td> : </td><td><textarea class="btn-block" name="address" rows="3"></textarea></td></tr>
	<tr><td>City </td><td> : </td><td><input class="span3" type="text" name="city"></td></tr>
	<tr><td>Age </td><td> : </td><td><input class="span2" type="text" name="age"></td></tr>
	<tr><td>Email </td><td> : </td><td><input class="span2" type="text" name="email"></td></tr>
	<tr><td>Gender </td><td> : </td><td><label class="radio inline"><input type="radio" name="gender" id="optionsRadios1" value="Pria"> Pria </label><label class="radio inline"><input type="radio" name="gender" id="optionsRadios2" value="Wanita"> Wanita </label></td></tr>
	<tr><td>Phone </td><td> : </td><td><input class="span3" type="text" name="phone"></td></tr>
	<tr><td>Catatan </td><td> : </td><td><textarea class="btn-block" name="other_info" rows="3"></textarea></td></tr>
	<tr><td>Photo </td><td> : </td><td><input size="40" type="file" name="fupload"></td></tr>
	<tr><td>Secret_key</td><td> : </td><td><input class="span2" type="text" name="secret_key"></td></tr>
	<tr><td>Otoritas </td><td> : </td><td><select class="span3" name="authority">
	<option value="admin">Admin</option>
	<option value="mitra">Mitra</option>
	<option value="member">Member</option>
	</select></td></tr>
	<tr><td>Koordinat di peta </td><td> : </td><td><input class="span3" type="text" name="map_lock"></td></tr>
	<tr><td colspan="3"><center><input class="btn btn-primary" name="Signup" type="submit" value="Signup">&nbsp <input class="btn btn-primary" type="reset" value="Batal"></center></td></tr>
</table></form>